<template>
  <div class="nav-header">
    <div class="nav-header-left">
      <div class="nav-header-logo">
        <img src="../../assets/image1/logo.png" alt="" />
      </div>
      <div class="nav-header-title">
        <span class="title-name">{{ headTitle.name }}</span>
      </div>
    </div>
    <div class="nav-header-middle">
      <div class="nav-header-item" v-for="(item, index) in navList" :key="index"
        :class="{ active: $route.path === item.path }" @click="navClick(item.path)">
        <router-link :to="item.path">
          <span class="nav-header-item-name">{{ item.name }}</span>
        </router-link>
      </div>
    </div>
    <div class="nav-header-right">
      <img src="../../assets/image1/shouqi.png" alt="" style="width: 16px; height: 16px; margin-right: 40px"
        @click="updateShowheader" />
      <div class="nav-header-user">
        <img src="../../assets/image1/rentou.png" alt="" style="width: 32px; height: 32px" />
        <span class="user-name">{{ userName }}</span>
        <el-dropdown>
          <span class="el-dropdown-link">
            <el-icon style="color: #fff">
              <ArrowDownBold />
            </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="toUser">个人中心</el-dropdown-item>
              <el-dropdown-item @click="back">退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>

</template>
<script setup>
import { ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { emitter } from "../../utils/eventBus";
import { ArrowDownBold } from '@element-plus/icons-vue';
const emit = defineEmits(['updateHeader']);
const userName = ref('admin');
const headTitle = ref({
  name: '国土空间基础信息平台',
});
const navList = ref([
  {
    name: '地图服务',
    path: '/map',
  },
  {
    name: '应用空间',
    path: '/app',
  },
  {
    name: '分析决策',
    path: '/analysis',
  },
  {
    name: '直通车',
    path: '/direct',
  },
  {
    name: '开放平台',
    path: '/open',
  },
]);

const router = useRouter();
const updateShowheader = () => {
  emit('updateHeader', false);
};

const back = () => {
  router.push('admin/login');
};

const toUser = () => {
  router.push('admin/user');
  emitter.emit('Showheader', false);
};

const navClick = (path) => {
  router.push(path);
};


onMounted(() => {
  // router.push('/map');   不能在这里跳转map，会导致访问其他页面得时候永远到map
});
</script>

<style lang="scss" scoped>
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
}

.nav-header {
  height: 60px;
  background-color: #016eab;
  display: flex;
  align-items: center; // 垂直居中
  justify-content: space-between; // 水平两端对齐
  padding: 0 20px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999;

  .nav-header-left {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 500px;

    .nav-header-logo {
      img {
        width: 60px;
      }
      margin-right: 15px;
      margin-left: 5px;
    }

    .nav-header-title {
      width: 368px;
      opacity: 1;
      color: #ffffff;
      font-size: 22px;
      font-weight: 400;
      font-family: "youshe";
      text-align: left;
    }
  }

  .nav-header-middle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    a{
      &:hover{
        background-color: rgba(0,0,0,0);
      }
    }
    .active {
      a {
        .nav-header-item-name {
          color: #fff;
        }
      }
    }

    .nav-header-item {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 110px;
      height: 60px;
      text-align: center;
      cursor: pointer;
      .nav-header-item-name {
        font-size: 18px;
        font-weight: 400;
        color: rgba(255,255,255,0.6);
        font-family: "pangmen";
      }
    }

    .nav-header-item.active::after {
      content: "";
      position: absolute;
      bottom: 5px;
      width: 76px;
      height: 8px;
      /* 下划线的高度 */
      background-image: url("@/assets/image1/nav.png");
      background-size: cover;
      /* 覆盖整个区域 */
      background-repeat: no-repeat;
    }
  }

  .nav-header-right {
    display: flex;
    align-items: center;
    justify-content: center;

    .nav-header-user {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 60px;
      cursor: pointer;
      position: relative;
    }

    .user-name {
      color: #ffffff;
      font-size: 16px;
      margin: 0px 10px;
    }
  }
}
</style>
